先談談 React

有使用過 React 的人應該知道，React 本身只是一個建構 UI 的 Library。如果要建立一個 web application，其他所需要的東西 React 都沒有強制我們使用特定的做法。

比方說我們會需要選擇一個 router library，規劃 folder 怎麼擺放，設定 css 的使用方式等等，這些需要我們需要手動的引入第三方套件或是自己手刻。

通常直接拿 React 來開發 SPA (Single Page Application) 網站都會以 CSR (Client Side Rendering) 的方式渲染頁面，也就是只會有一個 html.index 檔案，由這支 html 跟 server 請求每個頁面所需要的 js 檔，這些 js 檔案就會在 client 端渲染出對應的 virtual DOM，最後再把這個 virtual DOM 渲染成真實的 DOM。

這也導致 SPA 網站的 SEO 普遍都不佳，因為搜尋引擎在拿到這個網頁時，只會看到一個裝著 <div id="app"></div> 的 html。

整理兩個重點：

1. React 只負責 UI 渲染，其他都不管
2. 使用 React 時，我們的 js 都運行在 browser 上

什麼是 Next.js

Next.js 是基於 React 建立的全端框架。

Next 解決了上面提到的兩個痛點(還有很多由上面兩點延伸出來的更多痛點，待後續文章補充)。

Next主要運作在伺服器上，這讓我們可以使用 SSR (Server Side Rendering)、SSG (Static Site Generation) 的方式渲染網頁。這種網頁渲染方式已經預先在 server 把 html 給組好了，可以更容易讓搜尋引擎找到。在網頁渲染時也能先渲染出 html 與 css，雖然在 js hydration 以前使用者還不能與網頁互動，但至少可以先讓使用者看到畫面，提昇一些使用者體驗。

Next.js 13 正式引入了 Server Component，與 Suspense 組件搭配可以做到 Streaming 的效果，讓頁面中先處理好的部分先 hydration，不用等到整個頁面都好了才一起 hydration，大幅提升使用者體驗。

此外 Next 還提供了非常多方便好用的功能，未來也會慢慢來介紹：

1. File-system based router: 利用 App/Page Router 輕鬆建立 router
2. Rendering: 根據 next 提供的方法輕鬆做到 SSR/SSG/ISR/CSR 等渲染方式
3. Data fetching: 整合 fetch api，與 server component 搭配使用，效果更佳
4. Styling: 內建 CSS Modules, Tailwind CSS, and CSS-in-JS 方案
5. Typescript: 支援 Typescript
6. other: 提供了超棒的組件、hook，大幅增加開發者體驗，省去不必要的麻煩

後記

第二天就寫到凌晨 2 點，明天會不會涼去